<template>
  <header class="header">
    <div class="header__container">
      <div class="header__left">
        <h1 class="header__logo">职为你来</h1>
        <div class="header__location">
          <img src="@/assets/wxlg.png" alt="Location" class="header__icon" />
          <span>广州</span>
        </div>
      </div>

      <nav class="header__nav">
        <a
          v-for="item in navItems"
          :key="item.text"
          :href="item.link"
          class="header__nav-item"
        >
          <img v-if="item.icon" :src="item.icon" alt :class="header__icon" />
          {{ item.text }}
        </a>
      </nav>

      <div class="header__right">
        <button
          v-for="button in actionButtons"
          :key="button.text"
          class="header__button"
        >
          {{ button.text }}
        </button>
        <img
          src="@/assets/wxlg.png"
          alt="Bell"
          class="header__icon header__icon--interactive"
        />
        <img
          src="@/assets/wxlg.png"
          alt="Search"
          class="header__icon header__icon--interactive"
        />
      </div>
    </div>
  </header>
</template>

<script setup>
const navItems = [
  { text: '首页', link: '#' },
  { text: '推荐', link: '#' },
  { text: '搜索·公司', link: '#' },
  { text: '校园·海归', link: '#' },
  { text: '小程序', link: '#' },
  { text: '职友AI', link: '#' },
  { text: '职星会客厅', link: '#' },
  { text: '知识星辰阁', link: '#' }
]

const actionButtons = [
  { text: '我要招聘' },
  { text: '我要找工作' },
  { text: '登录/注册' }
]
</script>

<style lang="scss" scoped>
/* 你的样式代码 */
</style>

<style lang="scss" scoped>
.header {
  background-color: #fff;
  color: #ffffff;
  padding: 0.75rem;
  //   height: 2.5rem;
  line-height: 5px;

  &__container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__left,
  &__right {
    display: flex;
    align-items: center;
  }

  &__logo {
    color: #409eff;
    font-size: 1.5rem;
    font-weight: bold;
    margin-right: 1.5rem;
  }

  &__location {
    display: flex;
    align-items: center;
    color: #409eff;
    cursor: pointer;
    transition: color 0.3s ease;

    &:hover {
      color: #fa9797;
    }
  }

  &__nav {
    display: none;

    @media (min-width: 768px) {
      display: flex;
      gap: 1rem;
    }
  }

  &__nav-item {
    color: #606266;
    text-decoration: none;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;

    &:hover {
      color: #409eff;
    }
  }

  &__button {
    background-color: #ffffff;
    color: #606266;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-left: 1rem;

    &:hover {
      background-color: #eee;
    }
  }

  &__icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.25rem;

    &--interactive {
      color: #606266;
      cursor: pointer;
      transition: color 0.3s ease;
      margin-left: 1rem;

      &:hover {
        color: #ffffff;
      }
    }
  }
}
</style>
